<template>
  <ElButton type="primary" @click="initData">重置数据</ElButton>
  <BaseAgGrid v-bind="gridOptions" />
</template>

<script setup lang="ts">
import BaseAgGrid from '@/components/BaseAgGrid.vue'
import { ref } from 'vue'
import { type GridOptions } from 'ag-grid-community'
import type { IOlympicData } from '@/views/types'

const tmpDict = ref([
  { label: '唱', value: '唱' },
  { label: '跳', value: '跳' },
  { label: 'rap', value: 'rap' },
  { label: '篮球', value: '篮球' },
  { label: '男', value: '男' },
  { label: '女', value: '女' },
])

import json from './data/cus-cmp.json'
const gridOptions = ref<GridOptions<IOlympicData>>({
  loading: false,
  rowData: json,
  columnDefs: [
    // 行 文字居中
    { field: 'name', headerName: '名称', cellStyle: { textAlign: 'center' } },
    { field: 'age', headerName: '年龄' },
    {
      field: 'gender',
      headerName: '性别',
      cellEditor: 'editorSelRender',
      cellEditorParams: {
        values: tmpDict.value,
      },
    },
    { field: 'phone', headerName: '电话' },
    { field: 'email', headerName: '邮箱' },
    { field: 'address', headerName: '地址' },
    { field: 'company', headerName: '公司' },
    { field: 'remark', headerName: '备注', cellEditor: 'editorSplitCharRender' },
  ],
  defaultColDef: {
    flex: 1,
    editable: true,
    sortable: false,
  }
})

const initData = () => {
  gridOptions.value.loading = true;
  setTimeout(() => {
    gridOptions.value.rowData = json.slice(0, 2);
    gridOptions.value.loading = false
  }, 1000)
}

import editorSelRender from './components/editorSelRender.vue'
import editorSplitCharRender from './components/editorSplitCharRender.vue'
defineExpose({
  editorSelRender,
  editorSplitCharRender
})
</script>

<style scoped></style>
